<template>
  <div class="score-input" v-if="markModel">
    <div class="order">
      {{ topicTitle }}
    </div>
    <div class="correct-res">{{ scoreText }}</div>
  </div>
  <div v-else>
    <div class="score-point-input">
      <div
        class="input-field"
        @click="focusInput"
        :class="[scoreErr ? 'error' : '', showBoard ? 'focus' : '']"
      >
        <span class="spn point-name" :title="props.topicName"
          >{{ topicTitle }}
        </span>
        <span class="spn">({{ props.fullScore }}分)</span>
        <span class="spn divider"></span>
        <input
          type="number"
          ref="inputDom"
          :readonly="isQuickMode || isClickMode"
          :placeholder="isClickMode ? modelValue?.toString() : nowScore"
          :max="props.fullScore"
          min="0"
          step="0.5"
          :value="isClickMode ? modelValue : nowScore"
          :class="{ error: scoreErr }"
          class="s-input"
          @focus="inputFocus"
          @blur="clearErrMsg"
          @input="handleValueInput"
        />
        <span class="spn">分</span>
      </div>
      <p v-show="isClickMode" class="click-score-hint">
        点击打分不允许键盘输入分数
      </p>
      <p v-show="errorHint" class="error-hint">{{ errorHint }}</p>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, nextTick } from 'vue'
import { TEACHER_CORRECT_TEXT } from '@/views/assignment/single-correct/data'
const props = defineProps({
  // false 分值模式 true 对错模式
  markModel: { type: Boolean, required: true, default: false },
  // 题目标题
  topicTitle: { type: String, required: true },
  // 是否显示
  showBoard: { type: Boolean, required: true },
  // 分值打分的模式
  scoreMode: {
    type: Number,
    required: false
  },
  // 题目的满分
  fullScore: {
    type: Number,
    required: false
  }
})
const modelValue = defineModel('modelValue')
const nowScore = defineModel('nowScore')
const inputDom = ref()
const errorHint = ref('')
const scoreErr = ref(false)

const isClickMode = computed(() => {
  return props.scoreMode == 2
})
const isQuickMode = computed(() => {
  return props.scoreMode == 3
})

const focusInput = () => {
  !isQuickMode.value && inputDom.value && inputDom.value.focus()
}

// 没有分值时打分显示的结果
const scoreText = computed(() => {
  let name = TEACHER_CORRECT_TEXT[props.nowScore]
  //如果不是等待批改则不显示
  if (!props.showBoard) {
    name = ''
  }
  return name
})

const handleValueInput = e => {
  nowScore.value = Number(e.target.value)
}

const inputFocus = () => {
  if (!props.showBoard) return
  nextTick(() => {
    if (isQuickMode.value) {
      errorHint.value = '如需键盘打分请切换为普通打分模式'
      scoreErr.value = true
    } else {
      clearErrMsg()
    }
  })
}

const clearErrMsg = () => {
  errorHint.value = ''
  scoreErr.value = false
}
</script>

<style lang="less" scoped>
.score-input {
  box-sizing: border-box;
  border: 1px solid #009cff;
  height: 52px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #aaa;
  cursor: pointer;
  .order {
    width: 160px;
    text-align: center;
    border-right: 1px solid #cfcfcf;
  }
  .correct-res {
    width: 140px;
    text-align: center;
  }
}

.score-point-input {
  .input-field {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #cfcfcf;
    height: 52px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #aaa;
    cursor: pointer;

    .spn {
      flex: 0 0 auto;
      line-height: 1;
    }

    .point-name {
      margin-top: 4px;
      width: 110px;
      line-height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .divider {
      margin: 0 10px;
      width: 1px;
      height: 20px;
      background-color: #d9d9d9;
    }

    .s-input {
      margin-right: 8px;
      border: 0;
      border-radius: 2px;
      width: 4em;
      // outline: 1px solid #009cff;
      outline: 1px solid #d9d9d9;
      line-height: 1.6;
      text-align: center;
      font-size: 16px;
      color: #262626;

      &:invalid {
        outline-color: #e84c3d;
      }

      &::-webkit-inner-spin-button {
        display: none;
      }
    }

    .error {
      outline-color: #e84c3d;
    }
  }

  .focus {
    border-color: #009cff;
  }

  .error {
    border-color: #e84c3d;
  }

  .click-score-hint {
    padding-top: 10px;
    line-height: 1;
    text-align: right;
    font-size: 14px;
    color: #8c8c8c;
  }

  .error-hint {
    padding-top: 10px;
    line-height: 1;
    text-align: right;
    font-size: 14px;
    color: #e84c3d;
  }
}
</style>
